<template>
	<view class="self-pickup-wrap page_box">
		<!-- 定位自提点 -->
		<view class="pickup-location-box px20 head_box">
			<view class="location-title mb20">当前定位地点</view>
			<view class="x-bc">
				<view class="location-content" @tap="refreshGetLocation">
					{{ locationInfo.addressText || addressText }}
					<text class="iconfont icon-shuaxin ml10"></text>
				</view>
				<view class="other-address" @tap="$Router.push({ path: '/pages/app/store/search' })">
					其他地址
					<text class="cuIcon-right"></text>
				</view>
			</view>
		</view>
		<view class="content_box">
			<!-- 当前自提点 -->
			<view class="store-card ma20 pa20" v-if="storeInfo.id">
				<view class="x-bc card-head">
					<view class="x-f">
						<view class="img-wrap mr20"><image class="store-img" :src="storeInfo.image_first" mode=""></image></view>
						<view class="">
							<view class="store-title mb10">{{ storeInfo.name }}</view>
							<view class="store-dis x-f">
								<text class="buy-num">{{ storeInfo.buy_num }}</text>
								人已购买
								<text class="icon-line"></text>
								距您{{ storeInfo.distance_text }}
							</view>
						</view>
					</view>
					<button class="cu-btn  cur-btn">当前自提点</button>
				</view>
				<view class="store-address pt20">
					<text class="cuIcon-location mr10"></text>
					{{ storeInfo.address }}
				</view>
			</view>
			<!-- 附近自提点 -->
			<view class="near-store pa20">
				<view class="near-title">附近自提点</view>
				<view class="store-card ma20 pa20" v-for="item in storeList" :key="item.id">
					<view class="x-bc card-head">
						<view class="x-f">
							<view class="img-wrap mr20"><image class="store-img" :src="item.image_first" mode=""></image></view>
							<view class="">
								<view class="store-title mb10">{{ item.name }}</view>
								<view class="store-dis x-f">
									<text class="buy-num">{{ item.buy_num }}</text>
									人已购买
									<text class="icon-line"></text>
									距您{{ item.distance_text }}
								</view>
							</view>
						</view>
						<button class="cu-btn  sel-btn" @tap="selectStore(item)">选这个</button>
					</view>
					<view class="store-address pt20">
						<text class="cuIcon-location mr10"></text>
						{{ item.address }}
					</view>
				</view>
				<!-- 更多 -->
				<u-loadmore v-if="storeList.length" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
			</view>
		</view>
	</view>
</template>

<script>
import { MAP_KEY } from '@/env.js';
export default {
	components: {},
	data() {
		return {
			locationInfo: {},
			location: {}, //其他选择传过来
			addressText: '点击获取定位',
			storeInfo: uni.getStorageSync('storeInfo'),
			storeList: [],
			loadStatus: 'loadmore', //loadmore-加载前的状态，loading-加载中的状态，nomore-没有更多的状态
			currentPage: 1,
			lastPage: 1
		};
	},
	computed: {},
	onLoad() {
		this.locationInfo = uni.getStorageSync('locationInfo') ? uni.getStorageSync('locationInfo') : {};
	},
	onShow() {
		if (this.location.lat) {
			this.locationInfo = this.location;
		}
		if (this.locationInfo.lat) {
			this.storeList = [];
			this.getStoreAddress();
		} else {
			this.storeList = [];
			this.getLocation();
		}
	},
	onReachBottom() {
		if (this.currentPage < this.lastPage) {
			this.currentPage += 1;
			this.getNearStore();
		}
	},
	methods: {
		// 选择自提点
		selectStore(info) {
			this.storeInfo = info;
			this.$store.commit('STORE_INFO', info);
			this.$Router.back();
		},
		// 重置
		refreshGetLocation() {
			this.storeList = [];
			this.getLocation();
		},
		// 附近自提点
		getNearStore() {
			let that = this;
			uni.showLoading({
				mask: true
			});
			this.$api('store.near', {
				latitude: this.locationInfo.lat,
				longitude: this.locationInfo.lng
			}).then(res => {
				if (res.code === 1) {
					uni.hideLoading();
					that.storeList = [...that.storeList, ...res.data.data];
					that.lastPage = res.data.last_page;
					if (that.currentPage < res.data.last_page) {
						that.loadStatus = 'loadmore';
					} else {
						that.loadStatus = 'nomore';
					}
				}
			});
		},
		// 开启定位
		async getLocation() {
			// #ifdef MP-WEIXIN || MP-TOUTIAO || MP-QQ
			let status = await this.getSetting();
			if (status === 1) {
				this.openLocation();
				return;
			} else {
				if (status === 2) {
					this.addressText = '请开启定位权限';
					uni.showModal({
						title: '提示',
						content: '检测到您没打开此小程序的定位权限，是否去设置打开',
						success: res => {
							if (res.confirm) {
								this.openSetting();
								return;
							} else if (res.cancel) {
							}
						}
					});
				}
			}
			// #endif

			this.openLocation();
		},
		openLocation() {
			if (this.locationInfo.lat) {
				uni.chooseLocation({
					success: res => {
						this.locationInfo.lng = res.longitude;
						this.locationInfo.lat = res.latitude;
						this.getStoreAddress();
					},
					fail: err => {
						console.log('chooseLocation:', err);
					}
				});
			} else {
				uni.getLocation({
					type: 'gcj02',
					success: res => {
						this.locationInfo.lng = res.longitude;
						this.locationInfo.lat = res.latitude;
						this.getStoreAddress();
					},
					fail: err => {
						console.log('getLocation:', err);
					}
				});
			}
		},
		getSetting: function() {
			return new Promise((resolve, reject) => {
				uni.getSetting({
					success: res => {
						if (res.authSetting['scope.userLocation'] === undefined) {
							resolve(0);
							return;
						}
						if (res.authSetting['scope.userLocation']) {
							resolve(1);
						} else {
							resolve(2);
						}
					}
				});
			});
		},
		openSetting: function() {
			uni.openSetting({
				success: res => {
					if (res.authSetting && res.authSetting['scope.userLocation']) {
						this.openLocation();
					}
				},
				fail: err => {}
			});
		},
		//逆坐标解析
		async getStoreAddress() {
			this.addressText = '定位中...';
			const [error, res] = await uni.request({
				url: `https://restapi.amap.com/v3/geocode/regeo?location=${this.locationInfo.lng},${this.locationInfo.lat}&key=${MAP_KEY}`
			});
			if (res.data.status === '1') {
				const data = res.data.regeocode.addressComponent;
				const text = `${data.city}${data.district}${data.township}`;
				this.locationInfo = {
					...this.locationInfo,
					area: data.district,
					cityCode: data.citycode,
					addressText: text
				};
				uni.setStorageSync('locationInfo', this.locationInfo);
				this.getNearStore();
				this.location = {};
			} else {
				console.log('%c逆地址解析失败，请检查是否在env中配置地图key', 'color:green;background:yellow');
			}
		}
	}
};
</script>

<style lang="scss">
// 定位自提点
.pickup-location-box {
	background-color: #fff;
	height: 150rpx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	.location-title {
		font-size: 28rpx;
		font-weight: 500;
		color: #999999;
	}
	.location-content {
		font-size: 28rpx;
		font-weight: bold;
		color: $t-mainColor;
	}
	.other-address {
		font-size: 26rpx;
		font-weight: 500;
		color: #999999;
		white-space: nowrap;
	}
}

// 自提点卡片
.store-card {
	background-color: #fff;
	box-shadow: 0 5rpx 25rpx 2rpx rgba(202, 202, 202, 0.14);
	border-radius: 10rpx;
	position: relative;
	.card-head {
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #eeeeee;
	}
	.img-wrap,
	.store-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 6rpx;
		background-color: #ccc;
	}
	.store-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
	}
	.store-dis {
		font-size: 24rpx;
		font-weight: 400;
		color: #b1b3c7;
		.buy-num {
			color: $t-mainColor;
		}
		.icon-line {
			display: inline-block;
			height: 30rpx;
			width: 1px;
			background-color: #b1b3c7;
			margin: 0 10rpx;
		}
	}
	.cur-btn {
		background: none;
		padding: 0;
		font-size: 26rpx;
		font-weight: 500;
		color: $t-mainColor;
		position: absolute;
		top: 0rpx;
		right: 20rpx;
	}
	.sel-btn {
		width: 138rpx;
		height: 60rpx;
		background: linear-gradient(to right, $t-gradualColor, $t-mainColor);
		border-radius: 30rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #ffffff;
		padding: 0;
	}
	.store-address {
		font-size: 22rpx;
		font-weight: 500;
		color: #999999;
	}
}
// 附近自提点
.near-store {
	.near-title {
		font-size: 30rpx;
		font-weight: bold;
		color: #000000;
	}
}
</style>
